<template>
    <div class="my_ambient_list" v-loading="state.listLoading">
        <template v-if="state.environmentList.length > 0">
            <el-scrollbar height="100%">
                <div class="my_ambient_item" v-for="(item, index) in state.environmentList" :key="index"
                    :style="index == 0 ? 'border-top: 1px solid #e8e8e8;' : ''">
                    <div class="check">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox value="0" />
                        </el-checkbox-group>
                    </div>
                    <div class="column" style="width: 70px;margin-right: 8px;">
                        <div class="flex icon_hover">
                            <div class="text1">{{ item.number }}</div>
                            <div style="margin-left: 6px;" class="icon_img" @click="openDialog('number', item)"></div>
                        </div>
                        <div class="between text2">{{ item.id }}</div>
                    </div>
                    <div class="item_body">
                        <div class="body_item icon_hover2" style="padding-bottom: 2px;">
                            <img v-if="item.operating_system == 'Windows'" src="@/assets/home/windows.png"
                                style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                            <img v-if="item.operating_system == 'Android'" src="@/assets/home/android.png"
                                style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                            <img v-if="item.operating_system == 'iOS'" src="@/assets/home/ios.png"
                                style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                            <img v-if="item.operating_system == 'macOS'" src="@/assets/home/mac.png"
                                style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                            <div class="text3" style="cursor: pointer;" @click="openDetailDrawer(item)">{{ item.name }}
                            </div>
                            <div style="margin-left: 6px;" class="icon_img" @click="openDialog('name', item)"></div>
                        </div>
                        <div class="body_item">
                            <div class="ip icon_hover" style="width: 19%;">
                                <div>{{ store.getOptionsLabel(item.environment_data.proxy.type, state.map.procyType) }}
                                </div>
                                <div style="margin: 0 4px;">|</div>
                                <div class="text">{{ item.environment_data.proxy.type == -1 ? '--' :
                                    `${item.environment_data.proxy.host}:${item.environment_data.proxy.port}` }}</div>
                                <div style="margin-left: 6px;" class="icon_img" @click="openDialog('ip', item)"></div>
                            </div>
                            <div class="username item icon_hover">
                                <div class="label">账号:</div>
                                <div v-if="item.environment_data.user.plantUser.length == 0">--</div>
                                <div class="flex ellipsis" v-if="item.environment_data.user.plantUser.length > 0">
                                    <app-user-name v-for="(item2, index2) in item.environment_data.user.plantUser"
                                        :key="index2" :data="item2" />
                                </div>
                                <div style="margin-left: 6px;" class="icon_img" @click="openDialog('plantuser', item)">
                                </div>

                            </div>
                            <div class="remarks item icon_hover">
                                <div class="label">备注:</div>
                                <div class="text ellipsis">{{ item.environment_data.remark == '' ? '--' :
                                    item.environment_data.remark }}</div>
                                <div style="margin-left: 6px;" class="icon_img" @click="openDialog('remark', item)">
                                </div>
                            </div>
                            <div class="authorize item">
                                <div class="label">授权:</div>
                                <div>未授权</div>
                                <!-- <div style="margin-left: 16px;">04-12 20:50:13</div> -->
                            </div>
                        </div>
                    </div>
                    <div class="other">
                        <template v-if="browserStores.state.data[item.fingerprint_id]">
                            <div class="button" v-if="browserStores.state.data[item.fingerprint_id].status == 0">
                                <div
                                    style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 4px;width: 100%;">
                                    <el-progress :percentage="50" style="width: 90%;" :show-text="false" />
                                    <div style="font-size: 10px;margin-top: 2px;">获取参数中</div>
                                </div>
                            </div>

                            <div class="button" v-if="browserStores.state.data[item.fingerprint_id].status == 1">
                                <div>切换</div>
                            </div>
                        </template>

                        <div class="button" @click="openBrowser(item)" v-else>
                            <img src="@/assets/home/chro_hover.png"
                                v-if="item.environment_data.base.browser.type == 'ChroBrowser'"
                                style="width: 16px; height: 16px;margin-right: 8px;">
                            <img src="@/assets/home/firefox_hover.png"
                                v-if="item.environment_data.base.browser.type == 'FireBrowser'"
                                style="width: 16px; height: 16px;margin-right: 8px;">
                            <div>打开</div>
                        </div>

                        <!-- <img src="@/assets/home/other.png" style="width: 22px; height: 22px;margin-left: 16px;cursor: pointer;" alt=""> -->
                        <el-dropdown placement="bottom-end" trigger="click">
                            <img src="@/assets/home/other.png"
                                style="width: 22px; height: 22px;margin-left: 16px;cursor: pointer;" alt="">
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="openDetailDrawer(item)">详情</el-dropdown-item>
                                    <el-dropdown-item @click="store.editEnvironment(item)">编辑环境</el-dropdown-item>
                                    <el-dropdown-item @click="openDialog('plantuser', item)">编辑账号</el-dropdown-item>
                                    <el-dropdown-item @click="openDialog('ip', item)">修改代理</el-dropdown-item>
                                    <el-dropdown-item @click="openDialog('cookie', item)">编辑Cookie</el-dropdown-item>
                                    <!-- <el-dropdown-item>授权成员</el-dropdown-item>
                                    <el-dropdown-item>CookieRobot</el-dropdown-item>
                                    <el-dropdown-item>转移环境</el-dropdown-item>
                                    <el-dropdown-item>清除环境</el-dropdown-item>
                                    <el-dropdown-item>清除缓存</el-dropdown-item>
                                    <el-dropdown-item>运维授权</el-dropdown-item> -->
                                    <el-dropdown-item v-if="state.activeMenu != 'inAmbient'"
                                        @click="store.getcommon(item, 1)">设为常用</el-dropdown-item>
                                    <el-dropdown-item v-if="state.activeMenu == 'inAmbient'"
                                        @click="store.getcommon(item, 0)">取消常用</el-dropdown-item>
                                    <el-dropdown-item @click="store.getdelete(item)">删除环境</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </el-scrollbar>
        </template>
        <template v-else>
            <app-none :size="120" />
        </template>
    </div>
</template>

<script setup>

import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
import { browserStore } from '@/stores/browser.js'
const { store, state } = inject('storejs')

const browserStores = browserStore()
const list = ref([{}])
const checkList = ref([])

const openDialog = (value, row) => {
    state.dialogData = JSON.parse(JSON.stringify(row))
    if (value == 'number') {
        state.numberDialog.show = true
    } else if (value == 'name') {
        state.nameDialog.show = true
    } else if (value == 'ip') {
        state.ipDialog.show = true
    } else if (value == 'remark') {
        state.remarkDialog.show = true
    } else if (value == 'plantuser') {
        state.plantuserDialog.show = true
    } else if (value == 'cookie') {
        state.cookieDialog.show = true
    }
}

const openDetailDrawer = (row) => {
    state.detailDrawer.data = row
    state.detailDrawer.show = true
}

const openBrowser = (row) => {
    let selectMap = []
    if (row.environment_data.base.browser.type == 'ChroBrowser') {
        selectMap = state.map.Chrome
    } else {
        selectMap = state.map.Firefox
    }
    let path = ''
    selectMap.forEach(item => {
        if (item.value == row.environment_data.base.browser.version) {
            path = item.path
        }
    });

    if (path != '') {
        let body = {
            environment_id: row.id
        }
        http.put('/environment/open_environment', body).then((res) => {
            browserStores.openBrowser(row)
        })

    } else {
        state.dialogData = JSON.parse(JSON.stringify(row))
        state.downloadDialog.show = true
    }


}
</script>

<style lang="scss" scoped>
.my_ambient_list {
    width: 100%;
    height: 100%;
}


.my_ambient_item {
    width: 100%;
    height: 68px;
    padding: 10px 24px;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
}

.my_ambient_item:hover {
    background: #e8e8e8;
}

.check {
    margin-right: 12px;
}

.item_body {
    display: flex;
    flex-direction: column;
    flex: 1;

    .body_item {
        height: 20px;
        display: flex;
        align-items: center;

        .ip {
            display: flex;
            white-space: nowrap;
            /* 强制文本不换行 */
            overflow: hidden;
            /* 隐藏溢出的文本 */
            text-overflow: ellipsis;
            color: #b2b2b5;
            font-size: 14px;
            padding-right: 16px;
        }

        .item {
            display: flex;
            width: 27%;
            padding-right: 16px;
            color: #b2b2b5;
            font-size: 14px;

            .label {
                margin-right: 8px;
            }
        }
    }
}

.other {
    width: 122px;
    display: flex;
    justify-content: flex-end;

    .button {
        width: 74px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #3569fd;
        color: #3569fd;
        cursor: pointer;
    }
}

.text {
    white-space: nowrap;
    /* 强制文本不换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
}

.flex {
    display: flex;
    align-items: center;
}

.between {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.icon_hover,
.icon_hover2 {
    width: 100%;

    .icon_img {
        cursor: pointer;
        width: 16px;
        height: 16px;
    }
}

.icon_hover:hover {

    .icon_img {
        margin-top: 2px;
        background: url('@/assets/home/edit_hover.png');
        background-size: cover;
    }
}

.icon_hover2:hover {

    .text3 {
        color: #3569fd !important;
    }


    .icon_img {
        background: url('@/assets/home/edit_hover.png');
        background-size: cover;
    }
}

.text1 {
    color: #333;
    font-size: 14px;
}

.text2 {
    color: #b2b2b5;
    font-size: 12px;
}

.text3 {
    color: #1d2129;
    font-size: 14px;
}

.user_item {
    padding: 4px 6px;
    height: 20px;
    border: 1px solid #ececec;
    margin-right: 8px;
    color: #5b5c60;
    font-size: 12px;
}

.ellipsis {
    flex: 1;
    overflow: hidden;
    /* 隐藏超出内容 */
    text-overflow: ellipsis;
    /* 省略号 */

    white-space: nowrap;

}
</style>

<style>
.check .el-checkbox__inner {
    width: 16px;
    height: 16px;
}

.check .el-checkbox__inner::after {
    height: 7px;
    left: 5px;
    top: 2px;
}

.check .el-checkbox__label {
    padding-left: 0;
}
</style>